
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>载入动画 与递归显示</title>
    <style>
        *{ margin:0; padding:0;}
        a{ text-decoration:none;}
        ul,li{ list-style:none; margin:0; padding:0;}
        .boxxxx{ width:1075px; height:580px; margin:80px auto; border:1px solid #666; background:#FFF; position:relative;}
        .navBox{ position:absolute; bottom:0px; left:0; right:0px;}
        .nav{ width:1075px; height:34px; margin:0 auto; background:#ddd;  color:#FFF; position:relative;}
        .nav ul{ position:absolute; left:0px; top:0;}
        .nav ul li{ float:left; display:inline; padding:0 45px; height:34px; line-height:34px; margin-right:1px; background:#999; transition:all 0.3s ease-out 0.3s;}
        .nav ul li a{ color:#fff; }
        .nav ul li:hover{ background:#666 !important;}
        .left{ width:406px; height:565px; position:absolute; top:0; left:0; overflow:hidden;}
        .left ul {width:406px; height:565px; position:absolute; top:0; left:406px; z-index:22}
        .left ul li{ position:absolute;top:0; left:0; display:none;width:406px; height:565px; z-index:23 }
        .title{width:406px; height:142px; position:absolute; left:406px; top:0; background:rgba(172,30,64,0.6); background:#392438\9;
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(style=0,Opacity=60)"\9;
            filter:alpha(opacity=60)\9;/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f00000,endColorstr=#7f0000000);*/  z-index:999; display:block; color:#fff ;}
        .title h1{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:left; font-size:24px; float:left; width:91%; height:35px; line-height:35px; padding-left:9%; margin-top:20px; position:relative; }
        .title h2{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:center; font-size:14px; float:left;height:25px; line-height:25px;padding-left:9%; position:relative;}
        .right{ width:668px; height:547px; background:#6FF;position:absolute; top:0; right:0; /*overflow:hidden;*/}
        .right ul {width:668px; height:565px; position:absolute; top:0; left:0; background:#FFF }
        .right ul li{ float:left; display:inline;width:132px; height:565px; margin-left:1px; position:relative; }
        .right ul li img{display:none; position:absolute; left:0; right:0; top:-142px; }
        .right .liImg{ display:none; width:132px; height:142px; overflow:hidden; opacity:0.3;}
        .right .liImg:hover{ cursor:pointer}
        .right #lastImg{top:-142px;}
        .right .liSlideDown{ width:132px; height:100%; display:none;}
        .liBk0{ background:#716058 }
        .liBk1{ background:#fceabc }
        .liBk2{ background:#eaa000;}
        .liBk3{ background:#557da4;}
        .liBk4{ background:#cc9966;}
        .liContent{ position:absolute; left:0; top:142PX; width:132PX; height:423PX;}
    </style>
    <script src="../../resources/js/jquery-2.1.1.js"></script>
</head>
<body style="background:#666;">
<div class="boxxxx">
    <script>
        $(document).ready(function(e) {
            //载入动画
            rightImg();
            function rightImg(){
                $('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,function myNext(){
                    $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,myNext);
//                    if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0)){
//                        //if($('.right').find('#lastImg').attr("style").indexOf('top:0')){
//                        //alert('最后一个运动好了');
//                        $('.title').animate({ left:0},function(){//Sky 动画
//                            $(".right").find('li').hover(function(){  // 右侧 hover效果
//                                $(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
//                            },function(){
//                                $(this).find('.liSlideDown').stop(true,false).slideUp().hide();
//                            });//回调结束
//                        });
//                    }
                });
            }
//            //tab 切换效果
//            var liNum=$('.right').find('li').length;
//            $('.right').on("click","li",function(){
//                var index=$('.right').find("li").index(this);
//                //alert(index);
//                $('.left').find('li').eq(index).fadeIn(1250).siblings().fadeOut(800).end().add('.title').fadeIn(1500);
//                //$('.title').addClass("liBk"+index).removeClass("liBk"+(index=index-1));
//                // var myClassName="title 'liBk'+index";
//                var myClassName='liBk'+index;
//                var titles='title'+' ';
//                // console.log('myClassName是'+myClassName);
//                function setTitleClass(myClassName){
//                    $('.title').each(function(index) {
//                        this.className=(titles+myClassName);
//                    });
//                }
//                setTitleClass(myClassName);
//                // console.log("liBk"+index);
//            });
        });
    </script>
    <div class="right">
        <ul>
            <li><div class="liSlideDown liBk0"></div><img class="liImg" src="../images/wxc/r1.png" ><div class="liContent">11</div></li>
            <li><div class="liSlideDown liBk1"></div><img class="liImg" src="../images/wxc/r2.png" ><div class="liContent">22</div></li>
            <li><div class="liSlideDown liBk2"></div><img class="liImg" src="../images/wxc/r3.png" ><div class="liContent">33</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
            <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
        </ul>
    </div>
    <!--右边-->
    <!-- 底部菜单-->
    <div class="navBox">
        <div class="nav">
            <ul>
                <li><a href="">菜单</a></li>
                <li><a href="">首页</a></li>
                <li><a href="">Sky</a></li>
                <li><a href="">其他</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">我们</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>